<template>
	<div class="content-box">
		<el-text class="title" size="large" truncated>{{ title }}</el-text>
		<el-divider />
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="140px" style="width: 95%; margin-right: 5%">
			<el-form-item label="学号/工号" prop="uid" label-width="100px">
				<el-input v-model="ruleForm.uid" placeholder="请填写学号或工号" />
			</el-form-item>
			<el-form-item label="用户名" prop="username" label-width="100px">
				<el-input v-model="ruleForm.username" placeholder="请填写用户名" />
			</el-form-item>
			<div v-if="isRegister">
				<el-form-item label="密码" prop="password" label-width="100px">
					<el-input
						ref="passwordRef"
						type="password"
						v-model="ruleForm.password"
						show-password
						placeholder="请设置用户密码"
						autocomplete="new-password"
					>
						<template #prefix>
							<el-icon class="el-input__icon"><lock /></el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item
					v-if="ruleForm.password !== '' && ruleForm.password !== undefined"
					label=""
					align="center"
					style="height: 25px"
				>
					<!-- 展示长度条 -->
					<div
						class="bar"
						v-if="ruleForm.password !== '' && ruleForm.password !== undefined"
						:style="{ background: barColor, width: width + '%' }"
					>
						<!-- 展示文字 -->
						<div class="strength" :style="{ color: barColor }" v-if="ruleForm.password !== '' && ruleForm.password !== undefined">
							{{ strength }}
						</div>
					</div>
				</el-form-item>
				<el-form-item label="确认密码" prop="confirm" label-width="100px">
					<el-input
						ref="confirmRef"
						v-model="ruleForm.confirm"
						type="password"
						show-password
						placeholder="请确认用户密码"
						autocomplete="new-password"
					>
						<template #prefix>
							<el-icon class="el-input__icon"><lock /></el-icon>
						</template>
					</el-input>
				</el-form-item>
			</div>
			<el-form-item label="手机号" prop="mobile" label-width="100px">
				<el-input v-model="ruleForm.mobile" placeholder="填写手机号" />
			</el-form-item>
			<el-form-item label="邮箱" prop="mail" label-width="100px">
				<el-input v-model="ruleForm.mail" placeholder="填写邮箱" />
			</el-form-item>
			<el-form-item label="角色" prop="role" label-width="100px">
				<el-select v-model="ruleForm.role" placeholder="角色" style="width: 100%">
					<el-option label="学生" value="student" />
					<el-option label="老师" value="teacher" />
					<el-option label="校外来访人员" value="visitor" />
					<el-option label="校内职工" value="staff" />
					<el-option label="安保人员" value="security" />
					<el-option label="校内司机" value="driver" />
				</el-select>
			</el-form-item>
			<el-form-item label-width="100px">
				<el-button type="primary" style="width: 40%" @click="submitForm(ruleFormRef)">{{
					isRegister ? "注册" : "保存"
				}}</el-button>
				<el-button style="width: 40%; margin-left: 10%" @click="resetForm(ruleFormRef)">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts" name="DetailsForm">
import { reactive, ref, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { checkPhoneNumber } from "@/utils/eleValidate";
import { ElMessage } from "element-plus";
// 引入验证方法
import { checkPasswordRule, level } from "@/utils/checkPassword";
// const self = getCurrentInstance();
interface RuleForm {
	title: string;
	isRegister: boolean;
	infoForm: Object; // 具体每一个搜索项的配置
}
const props = defineProps<RuleForm>();
console.log("props", props);
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
	uid: "",
	username: "",
	password: "",
	confirm: "",
	mobile: "",
	mail: "",
	role: ""
});
// const ruleForm = reactive({
// 	uid: "010371002",
// 	username: "保安",
// 	mobile: "13020203323",
// 	mail: "000@qq.com",
// 	role: "teacher"
// });

// 强度条颜色
const barColor = ref("");
// 强度条长度
const width = ref("");
// 强度条说明
const strength = ref("");

// 监听注册页面的新密码变化状态，来改变密码强弱显示
watch(
	() => ruleForm.password,
	newVal => {
		if (newVal != "") {
			const res: string = level(newVal);
			switch (res) {
				case "非常弱":
					barColor.value = "red";
					width.value = "20";
					strength.value = "非常弱";
					break;
				case "弱":
					barColor.value = "#ee795c";
					width.value = "40";
					strength.value = "弱";
					break;
				case "一般":
					barColor.value = "orange";
					width.value = "60";
					strength.value = "一般";
					break;
				case "强":
					barColor.value = "green";
					width.value = "80";
					strength.value = "强";
					break;
				case "非常强":
					barColor.value = "#1B8EF8";
					width.value = "100";
					strength.value = "非常强";
					break;
			}
		}
	}
);

// 密码校验规则
const validatePassword = (rule: any, value: string, callback: any) => {
	if (value === "") {
		callback(new Error("请输入密码"));
	} else {
		let name: string = "";
		if (ruleForm.username === "") {
			name = "空";
		} else {
			name = ruleForm.username;
		}
		const result: string = checkPasswordRule(value, name);
		if (result === "校验通过") {
			callback();
		} else {
			callback(new Error(result));
		}
	}
};

const validateConfirm = (rule: any, value: string, callback: any) => {
	return ruleForm.password === value ? callback() : callback(new Error("两次密码输入不一致"));
};

// 提交校验方法
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(valid => {
		if (valid) {
			//定义一个自定义事件
			const emit = defineEmits(["handleSubmit"]);
			//通过事件传过去
			emit("handleSubmit", ruleForm);
			console.log("submit!");
			ElMessage({
				message: "注册成功！",
				type: "success"
			});
		} else {
			console.log("error submit!");
			return false;
		}
	});
};

const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};

const rules = reactive<FormRules>({
	uid: [{ required: true, message: "请输入您的学号(学生)或工号(教职工)", trigger: "blur" }],
	username: [
		{ required: true, message: "请输入用户名，用户名为用户姓名", trigger: "blur" },
		{ min: 2, max: 5, message: "用户名应包含2~5个字符", trigger: "blur" }
	],
	password: [
		{
			required: true,
			message: "密码不能为空！",
			trigger: "blur"
		},
		{ validator: validatePassword, trigger: "blur" }
	],
	confirm: [
		{
			required: true,
			message: "请确认密码！",
			trigger: "blur"
		},
		{ validator: validateConfirm, trigger: "blur" }
	],
	mobile: [{ required: true, validator: checkPhoneNumber, trigger: "blur" }],
	mail: [{ required: false, trigger: "blur" }],
	role: [
		{
			required: true,
			message: "请选择角色",
			trigger: "change"
		}
	]
});
</script>

<style scoped lang="scss">
.el-form {
	width: 100%;
	.text-center {
		text-align: center;
	}
}
.strength {
	font-size: 12px;
	/* stylelint-disable-next-line color-hex-case */
	color: #271e25;
	/* stylelint-disable-next-line order/properties-order */
	position: relative;
	top: 5px;
	left: 0;
	transition: 0.5s all ease;
}
.bar {
	/* width: 400px; */
	height: 5px;
	background: red;
	transition: 0.5s all ease;
	/* stylelint-disable-next-line order/properties-order */
	max-width: 420px;
	margin: 2px 0 5px 5px;
	/* stylelint-disable-next-line order/properties-order */
	position: absolute;
}
.title {
	color: gray;
	/* stylelint-disable-next-line order/properties-order */
	font-size: xx-large;
}
</style>
